<template>
  <div class="main manage" :class="{darkManage:darkTheme}">
    <div class="manage-inner" v-if="flag">
      <el-tabs v-model="activeName" @tab-click="handleClick" :tab-position="tabPosition">
        <el-tab-pane label="文章管理" name="first"><ManageArticle></ManageArticle></el-tab-pane>
        <el-tab-pane label="新建文章" name="second"><NewArticle></NewArticle></el-tab-pane>
        <el-tab-pane label="友情链接" name="third"><FriendsLink></FriendsLink></el-tab-pane>
        <el-tab-pane label="系统设置" name="forth"><ManageSetting></ManageSetting></el-tab-pane>
      </el-tabs>
    </div>
    <div class="login main" v-if="!flag">
      <Login></Login>
    </div>
  </div>  
</template>

<script>
import ManageArticle from "./ManageArticle";
import ManageSetting from "./ManageSetting";
import FriendsLink from '../FriendsLink';
import NewArticle from './NewArticle'
import Login from './Login'
import {mapState,mapMutations} from 'vuex'
export default {
  components:{
    ManageArticle,
    ManageSetting,
    FriendsLink,
    NewArticle,
    Login
  },
  data() {
    return {
      activeName: 'first',
      tabPosition: 'left',
      // flag:false
    };
  },
  methods: {
    ...mapMutations("manage",["setFlag"]),
    handleClick(tab, event) {
      // console.log(tab, event);
    }

  },
  computed:{
    ...mapState("manage",["flag"]),
    ...mapState("common",["darkTheme"]),
  }
}
</script>

<style lang="scss">
.manage{
  margin-top: 80px;
  /* height: 600px; */
  position: relative;
}
/* .el-tabs__nav{
  left: 30px;
} */
.el-tabs__item{
  font-size: 12px;
  text-align: left;
}


/* 暗黑主题 */
.darkManage{
  .el-tabs__item{
    color: #c6d2ea;
  }
  .el-tabs__item.is-active{
    color:#409EFF;
  }
  
}
</style>